import { Flex } from "antd"
import type React from "react"
import { Navigate, Route, Routes } from "react-router"
import { Issue } from "../../pages/issue"
import { Book } from "../../pages/book"
import { QA } from "../../pages/qa"
import { Home } from "../../pages/home"
import { IssueDetail } from "../../pages/issueDetail"
import { IssueEdit } from "../../pages/issueEdit"
import { RouterAuth } from "../RouterAuth"

const style: React.CSSProperties = {
   minHeight: "calc(100vh - 100px - 100px)",
   width:1200,
   margin:" 0 auto",
   
}
export const Content = () => {
   return (
      <Flex style={style} vertical>
         {/* <div></div> */}
         <Routes>
            <Route path="/" element={<Navigate to="/issue"></Navigate>}></Route>
            <Route path="/issue" element={<RouterAuth><Issue></Issue></RouterAuth>}></Route>
            <Route path="/book" element={<RouterAuth><Book></Book></RouterAuth>}></Route>
            <Route path="/qa" element={<RouterAuth><QA></QA></RouterAuth>}></Route>
            <Route path="/home" element={<RouterAuth><Home></Home></RouterAuth>}></Route>
            <Route path="/issue/:id" element={<RouterAuth><IssueDetail></IssueDetail></RouterAuth>}></Route>
            <Route path="/editissue" element={<RouterAuth><IssueEdit></IssueEdit></RouterAuth>}></Route>
         </Routes>
      </Flex>
   )
}